import React, { Component } from "react";
import ReactDOM from "react-dom";
import MaterialTable from "material-table";
import axios from 'axios';

export default function MaterialTableDemo() {
    const [state, setState] = React.useState({
        columns: [
            { title: 'id', field: 'id', editable: 'never' },
            { title: 'name', field: 'name', editable: 'never' },
            { title: 'openid', field: 'openid', editable: 'never' },
            { title: 'userPhone', field: 'userPhone' },

            {
                title: 'vip',
                field: 'vip',
                lookup: { false: '否', true: '是' },
            },
        ],
        data: [
            { "id": 18, "name": "lan", "openid": "12345678", "userPhone": "17876894834" }
        ],
    });

    return (
        <MaterialTable
            title="用户"
            columns={state.columns}
            data={state.data}

            editable={{
                // onRowAdd: newData =>
                //     new Promise(resolve => {
                //         setTimeout(() => {
                //             resolve();
                //             const data = [...state.data];
                //             data.push(newData);
                //             setState({ ...state, data });
                //         }, 600);
                //     }),

                onRowUpdate: (newData, oldData) =>
                    new Promise(resolve => {
                        var helo
                        setTimeout(() => {
                            resolve();
                            console.log("hahah");
                            console.log(newData)
                            const data = [...state.data];
                            let url = "/user/list"
                            axios.get(url, newData)
                                .then(function (response) {
                                    var helo = response.data
                                    // alert(data);
                                    console.log(helo);
                                    console.log(helo.length);
                                })
                                .catch(function (error) {
                                    console.log(error);
                                });
                            data[data.indexOf(oldData)] = helo;
                            // console.log(data[data.indexOf(oldData)])

                            setState({ ...state, data });
                        }, 600);
                    }),
                // onRowDelete: oldData =>
                //     new Promise(resolve => {
                //         setTimeout(() => {
                //             resolve();
                //             const data = [...state.data];
                //             data.splice(data.indexOf(oldData), 1);
                //             setState({ ...state, data });
                //         }, 600);
                //     }),
            }}
        />
    );
}
